{extend name="public/common"}

{block name="style"}
<link rel="stylesheet" href="__HOME__/css/mui/mui.min.css">
<link rel="stylesheet" href="__HOME__/css/word/index.css">
<title>点对点教育VIP学员_每日单词</title>
<style>
    .list ul a p {
        margin-bottom: 0;
        font-size: 1.48rem;
    }

    .list ul a span:nth-child(3).notes {
        position: absolute;
        bottom: 1.5vw;
        display: inline-block;
        width: 66vw;
    }

    .list ul a span:nth-child(3).notes span {
        display: inline-block;
    }

    .list ul a span:nth-child(3).notes span.fl {
        width: 65%;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
        font-size: 1.48rem;
    }

    .fl {
        float: left;
    }

    .list ul li a img{
        width: 24vw;
        height: 16vw;
        float: left;
    }
</style>
{/block}
{block name="body"}
<div class="main">
    <div id="refreshContainer" class="mui-content mui-scroll-wrapper">
        <div class="mui-scroll">
            <div class="list">
                {empty name="$list"}
                <div class="default"><img src="__HOME__/images/common/nomessage.png" alt="暂无消息"></div>
                {else/}
                <ul>
                    {volist name="list" id="vo"}
                    <li>
                        <a href="{:Url('Word/detail?id='.$vo['id'])}">
                            <img src="{$vo.front_cover}">
                            <div class="title clearfix">
                                <p class="fl">{$vo.title}</p>
                                <i class="fr fa fa-angle-right"></i>
                            </div>
                            <span class="notes">
                                <span class="fl">
                                    <span class="fl">【每日单词】</span>
                                </span>
                            </span>
                        </a>
                    </li>
                    {/volist}
                </ul>
                {/empty}
            </div>
        </div>
    </div>
</div>
{/block}

{block name="script"}
<script src="__HOME__/js/mui.min.js"></script>
<script src="//res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
<script>
    //关闭分享
    function onBridgeReady() {
        WeixinJSBridge.call('hideOptionMenu');
    }
    if (typeof WeixinJSBridge == "undefined") {
        if (document.addEventListener) {
            document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false);
        } else if (document.attachEvent) {
            document.attachEvent('WeixinJSBridgeReady', onBridgeReady);
            document.attachEvent('onWeixinJSBridgeReady', onBridgeReady);
        }
    } else {
        onBridgeReady();
    }

    $("title").text("点对点教育VIP学员_每日单词");
    window.onload = function () {
        if ($(".list ul a").length < 10) {
            mui('#refreshContainer').pullRefresh().disablePullupToRefresh();
        } else {
            mui('#refreshContainer').pullRefresh().enablePullupToRefresh();
        }
    };
    //初始化下拉加载
    mui.init({
        pullRefresh: {
            container: '#refreshContainer',
            up: {
                callback: loadScroll
            }
        }
    });

    //上拉加载更多
    function loadScroll() {
        var len = $(".list ul a").length;
        var type = "{$type}";
        var day = "{$day}";
        console.log(len)
        $.ajax({
            type: "post",
            url: "{:Url('Word/more')}",
            data: {
                length: len,
                type:type,
                day:day
            },
            beforeSend: function (XMLHttpRequest) {

            },
            success: function (data) {
                if (data.code == 1) {
                    addLists(data);
                    var dataLen = data.data.length;
                    if (data.data.length == 10) {
                        mui('#refreshContainer').pullRefresh().endPullupToRefresh(false);
                    } else {
                        mui('#refreshContainer').pullRefresh().endPullupToRefresh(true);
                    }
                } else {
                    mui('#refreshContainer').pullRefresh().endPullupToRefresh(true);
                }
            }
        })
    }

    //加载更多列表
    function addLists(data) {
        var html = '';
        var lists = data.data;
        var len = lists.length;
        for (var i = 0; i < len; i++) {
            var list = lists[i];
            html += '<li><a href="/home/Party/detail/id/' + list.id + '.html">'+
                    '<img src="'+list.front_cover+'">'+
                '<div class="title clearfix">' +
                '<p class="fl">' + list.title + '</p>'+
                '<i class="fr fa fa-angle-right"></i>' +
                '</div>' +
                '<span class="notes">'+
                '<span class="fl">'+
                '<span class="fl">【每日单词】</span>'+
            '</span>'+
                '</a></li>';
        }
        $('.list ul').append(html);
    }

    //触发点击事件
    mui('#refreshContainer').on('tap', 'a', function (e) {
        var url = this.getAttribute("href");
        window.location.href = url;
    });

    mui("#refreshContainer").on("touchstart", "a", function () {
        $(this).css("backgroundColor", "rgba(0,0,0,.1)");
    }).on("touchend", "a", function () {
        $(this).css("backgroundColor", "#fff");
    });
</script>
{/block}